<template>
  <el-card>
    <div class="outdetail">
      <h3 class="applyRecode">账单明细</h3>
      <el-form  class="form" :model="form" ref="form" label-width="100px">
        <div class="form1">
          <el-form-item class="year" size="small" label="搜索：">
          <el-input placeholder="请输入买家姓名/买家电话" v-model="form.sea"></el-input>
          </el-form-item>
          <div class="btns">
            <el-button type="primary" @click="findInit" size="small">查询</el-button>
          </div>
        </div>
        <div class="form2">
          <p>销售金额<span>{{form.sellnum}}元</span></p>
          <p>退款金额<span>{{form.refnum}}元</span></p>
          <p>平台服务费<span>{{form.charge}}元</span></p>
          <p>扶贫公益基金<span>{{form.profit}}元</span></p>
          <p>结算金额<span>{{form.settlenum}}元</span></p>
        </div>
      </el-form>
      <el-table class="tables" :data="tableData">
        <el-table-column prop="buytime" label="下单时间" align="center"></el-table-column>
        <el-table-column prop="orStatus" label="订单状态" align="center"></el-table-column>
        <el-table-column prop="orNum" label="订单号" align="center"></el-table-column>
        <el-table-column prop="buyMsg" label="买家信息" align="center"></el-table-column>
        <el-table-column prop="sellsum" label="销售金额（元）" align="center"></el-table-column>
        <el-table-column prop="refnum" label="退款金额（元）" align="center"></el-table-column>
        <el-table-column prop="charge" label="平台交易服务费（元）" align="center"></el-table-column>
        <el-table-column prop="profit" label="扶贫公益金（元）" align="center"></el-table-column>
        <el-table-column prop="settlenum" label="结算金额（元）" align="center"></el-table-column>
        <el-table-column prop="faStatus" label="发票状态" align="center"></el-table-column>
      </el-table>
      <div class="page">
        <el-pagination background style="float:right;margin:26px 0 30px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </el-card>
</template>
<script>
export default {
  name: 'outdetail',
  data () {
    return {
      currentPage: 1,
      pagesize: 10,
      total: 40,
      form: {
        sea: '',
        sellnum: 'xx',
        refnum: 'xx',
        charge: 'xx',
        profit: 'xx',
        settlenum: 'xx'
      },
      tableData: [
        {
          buytime: '2018-10-30 15:53:39',
          orStatus: '交易完成（未退款）',
          orNum: '',
          buyMsg: '187****0666',
          sellsum: '¥99.90+1000积分',
          refnum: '¥0.00',
          charge: '',
          profit: '',
          settlenum: '',
          faStatus: ''
        }
      ]
    }
  },
  created () {

  },
  methods: {
    findInit () {
      // this.currentPage = 1
      // this.init()
    },
    handleSizeChange (val) {
      // this.pagesize = val
      // this.init()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      // this.currentPage = val
      // this.init()
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
<style lang="scss" scope>
.outdetail {
  .form {
    .form1 {
      display: flex;
      .year {
        margin-right: 25px;
      }
    }
    .form2 {
      display: flex;
      padding-left: 44px;
      p {
        margin-right: 20px;
        font-size: 14px;
        span {
          padding: 0 10px;
        }
      }
    }
  }
}
</style>
